<template>
    <div>
        <div class="filter-container">
            <common-input size="mini" @keyup.enter.native="handleFilter" class="w200" placeholder="广告名称/代码" v-model="listQuery.name"> </common-input>
            <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button size="mini" @click="handleCreate" class="ml10" type="primary" icon="el-icon-plus">新增广告</el-button>
        </div>
        <el-table :key='tableKey' :data="list" style="width: 100%">
            <el-table-column align="left" label="代码" width="200">
                <template slot-scope="scope">
                    <span>{{scope.row.code}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="名称" width="350"><template slot-scope="scope">
  <span>
    {{scope.row.name}}</span>
            </template>

            </el-table-column>
            <el-table-column align="center" label="媒体数">
                <template slot-scope="scope">
                    <el-button type="text" @click="viewItem(scope.row)">{{scope.row.itemCount}}</el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" label="系统广告">
                <template slot-scope="scope">
                    {{getStatusText(scope.row)}}
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
                    <el-button v-if="!scope.row.isSystem" type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="500px">
            <el-form :model="form" :rules="rules" ref="form" label-width="150px">
                <el-form-item label="广告编码" prop="code">
                    <common-input v-model="form.code" placeholder="请输入广告编码" maxlength="20" :disabled="dialogStatus=='update'" />
                </el-form-item>
                <el-form-item label="广告名称" prop="name">
                    <common-input v-model="form.name" placeholder="请输入广告名称" maxlength="20" />
                </el-form-item>
                <el-form-item label="排序" prop="orderNum">
                    <common-input v-model="form.orderNum" class="w60" maxlength="3" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancel('form')">取消</el-button>
                <el-button size="mini" v-if="dialogStatus=='create'" type="primary" @click="create('form')">确定</el-button>
                <el-button size="mini" v-else type="primary" @click="update('form')">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="dialogTextMap[itemDialogStatus]" :visible.sync="itemDialogFormVisible" :close-on-click-modal="false" width="500px">
            <el-form :model="itemForm" :rules="itemRules" ref="itemForm" label-width="150px">
                <el-form-item label="媒体标题" prop="name">
                    <common-input v-model="itemForm.name" maxlength="20" placeholder="请输入媒体标题" />
                </el-form-item>
                <el-form-item label="媒体图片" prop="picture">
                    <pic-sel v-model="itemForm.picture" /> 
                </el-form-item>
                <el-form-item label="打开方式" prop="targetType">
                    <el-select size="mini" v-model="itemForm.targetType" placeholder="打开方式">
                        <el-option
                                v-for="item in target_type_list"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="targetValue" v-if="itemForm.targetType!='elem1'&&itemForm.targetType!='elem2'&&itemForm.targetType!='pdd1'&&itemForm.targetType!='pdd2'&&itemForm.targetType!='pdd4'&&itemForm.targetType!='pdd5'&&itemForm.targetType!='pdd6'">
                    <common-input v-model="itemForm.targetValue" fieldType="url" :placeholder="getTargetValuePlaceholder()" />
                </el-form-item>
                <el-form-item label="背景颜色" prop="bgColor">
                    <common-input v-model="itemForm.bgColor" maxlength="20" placeholder="背景色" />
                </el-form-item>
                <el-form-item label="排序" prop="orderNum">
                    <common-input v-model="itemForm.orderNum" class="w60" maxlength="3" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogCancel('itemForm')">取消</el-button>
                <el-button size="mini" v-if="itemDialogStatus=='create'" type="primary" @click="itemCreate('itemForm')">确定</el-button>
                <el-button size="mini" v-else type="primary" @click="itemUpdate('itemForm')">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="媒体管理" :visible.sync="itemDialogListVisible" :close-on-click-modal="false">
            <el-row>
                <el-col :span="24">
                    <el-button size="mini" type="primary" @click="handleItemCreate">新增媒体</el-button>
                </el-col>
            </el-row>
            <el-table :data="itemList" style="width: 100%;margin-top:10px;">
                <el-table-column align="left" label="标题">
                    <template slot-scope="scope">
                        <span>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="图片" width="150">
                    <template slot-scope="scope">
                        <img :src="scope.row.picture" class="img-thumbnail" style="width: 100px;" />
                    </template>
                </el-table-column>
                <el-table-column align="left" label="背景色">
                    <template slot-scope="scope">
                        <span>{{scope.row.bgColor}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="打开方式">
                    <template slot-scope="scope">
                        <span>{{getTargetType(scope.row.targetType)}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="打开地址">
                    <template slot-scope="scope">
                        <span>{{scope.row.targetValue}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="排序">
                    <template slot-scope="scope">
                        <span>{{scope.row.orderNum}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="itemEdit(scope.row)" />
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleItemDelete(scope.row)" />
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="closeMediaList()">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        isIntegerNotMust
    } from '../../utils/validator'
    import {
        adPage,
        delAd,
        getAd,
        putAd,
        addAd,
        adItem,
        delAdItem,
        getAdItem,
        putAdItem,
        addAdItem
    } from '../../api/ad';
    export default {
        name: 'ad-list',
        components: {
            'pic-sel': () => import('../../components/PicSel/index')
        },
        data() {
            return {
                listAdId: [],
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    pageNum: 1,
                    pageSize: 20,
                    name: undefined
                },
                tableKey: 0,
                dialogStatus: '',
                dialogFormVisible: false,
                textMap: {
                    update: '编辑广告',
                    create: '新增广告'
                },
                form: {
                    code: undefined,
                    name: undefined,
                    order_num: 0
                },
                rules: {
                    code: [
                        {
                            required: true,
                            message: '请输入广告编码',
                            trigger: 'blur'
                        }
                    ],
                        name: [
                        {
                            required: true,
                            message: '请输入广告名称',
                            trigger: 'blur'
                        }
                    ],
                    orderNum: [
                        {
                            validator: isIntegerNotMust,
                            trigger: 'blur'
                        }
                    ]
                },
                itemList:[],
                itemDialogFormVisible: false,
                itemDialogStatus: '',
                itemForm: {
                    name: undefined,
                    picture: undefined,
                    orderNum: 0,
                    adId: undefined,
                    targetType: undefined,
                    targetValue: undefined,
                    bgColor: undefined,
                },
                itemRules: {
                    name: [
                        {
                            required: true,
                            message: '请输入媒体标题',
                            trigger: 'blur'
                        }
                    ],
                    orderNum: [
                        {
                            validator: isIntegerNotMust,
                            trigger: 'blur'
                        }
                    ]
                },
                itemDialogListVisible: false,
                dialogTextMap: {
                    update: '编辑媒体',
                    create: '新增媒体'
                },
                target_type_list: [
                    // {
                    //     value: 'goods',
                    //     label: '红包商品'
                    // },
                    // {
                    //     value: 'retail',
                    //     label: '分销商品'
                    // },
                    {
                        value: 'zc',
                        label: '分销专场'
                    },
                    {
                        value: 'rzc',
                        label: '红包专场'
                    },
                    // {
                    //     value: "tb",
                    //     label: '淘宝活动'
                    // },
                    // {
                    //     value: "elem1",
                    //     label: '饿了么活动'
                    // },
                    // {
                    //     value: "elem2",
                    //     label: '饿了么果蔬生鲜活动'
                    // },
                    // {
                    //     value: "jd",
                    //     label: '京东推广'
                    // },
                    // {
                    //     value: "pdd1",
                    //     label: '拼多多限时秒杀'
                    // },
                    // {
                    //     value: "pdd2",
                    //     label: '拼多多充值中心'
                    // },
                    // {
                    //     value: "pdd3",
                    //     label: '拼多多活动转链'
                    // },
                    // {
                    //     value: "pdd4",
                    //     label: '拼多多百亿补贴'
                    // },
                    // {
                    //     value: "pdd5",
                    //     label: '拼多多领券中心'
                    // },
                    // {
                    //     value: "pdd6",
                    //     label: '拼多多火车票'
                    // },
                    // {
                    //     value: "meituan",
                    //     label: '美团转链'
                    // },
                    // {
                    //     value: "wph",
                    //     label: '唯品会转链'
                    // },
                    // {
                    //     value: "haitao",
                    //     label: '考拉海购转链'
                    // },
                    // {
                    //     value: 'industry',
                    //     label: '行业'
                    // },
                    // {
                    //     value: 'category',
                    //     label: '分类'
                    // },
                    // {
                    //     value: 'brand',
                    //     label: '品牌'
                    // },
                    {
                        value: 'link',
                        label: '其他(连接/pages/xxx/xxx)'
                    }
                ],
                currentAdId: 0
            }
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                this.listLoading = true;
                adPage(this.listQuery).then(response => {
                    this.list = response.data.list;
                    this.total = response.data.total;
                    this.listLoading = false;                  
                })
            },
            handleFilter() {
                this.getList();
            },
            handleSizeChange(val) {
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            edit(row) {
                getAd(row.id)
                    .then(response => {
                        this.form = response.data;
                        this.dialogFormVisible = true;
                        this.dialogStatus = 'update';
                    });
            },
            viewItem(row) {
                adItem(row.id).then(response => {
                    this.currentAdId = row.id;
                    this.itemList = response.data;
                    this.itemDialogListVisible = true;
                })
                // this.itemDialogFormVisible = true;
                // this.itemDialogStatus = 'create';
            },
            getStatusText(row) {
                if(row.isSystem === 1) {
                    return "是"
                }

                return "否"
            },
            getStatusColor(row) {
                if(row.status === 1) {
                    return "success"
                }

                return "danger"
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        delAd(row.id)
                            .then(() => {
                                this.$message.success("广告删除成功");
                                const index = this.list.indexOf(row);
                                this.list.splice(index, 1);
                            });
                    }).catch(()=>{});
            },
            handleCreate() {
                this.resetTemp();
                this.dialogStatus = 'create';
                this.dialogFormVisible = true;
            },
            resetTemp() {
                this.form = {
                    code: undefined,
                    name: undefined,
                    orderNum: 0
                };
            },
            create(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        addAd(this.form)
                            .then(() => {
                                this.dialogFormVisible = false;
                                this.getList();
                                this.$message.success("广告创建成功");
                            })
                    } else {
                        return false;
                    }
                });
            },
            update(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        this.dialogFormVisible = false;
                        this.form.password = undefined;
                        putAd(this.form.id, this.form).then(() => {
                            this.dialogFormVisible = false;
                            this.getList();
                            this.$message.success("广告更新成功");
                        });
                    } else {
                        return false;
                    }
                });
            },
            cancel(formName) {
                this.dialogFormVisible = false;
                this.$refs[formName].resetFields();
            },
            closeMediaList() {
                this.itemDialogListVisible = false;
            },
            getTargetType(target_type) {
                if(target_type === "goods") {
                    return "商品";
                } else if(target_type === "zc") {
                    return "专场";
                } else if(target_type === "link") {
                    return "其他";
                } else if(target_type === "tb") {
                    return "淘宝活动";
                } else if(target_type === "elem1") {
                    return "饿了么活动";
                } else if(target_type === "elem2") {
                    return "饿了么果蔬生鲜活动";
                } else if(target_type === "jd") {
                    return "京东推广";
                } else if(target_type === "pdd1") {
                    return "拼多多限时秒杀";
                } else if(target_type === "pdd2") {
                    return "拼多多充值中心";
                } else if(target_type === "pdd3") {
                    return "拼多多活动转链";
                } else if(target_type === "pdd4") {
                    return "拼多多百亿补贴";
                } else if(target_type === "pdd5") {
                    return "拼多多领券中心";
                } else if(target_type === "pdd6") {
                    return "拼多多火车票";
                } else if(target_type === "meituan") {
                    return "美团转链";
                } else if(target_type === "wph") {
                    return "唯品会转链";
                } else if(target_type === "haitao") {
                    return "考拉海购转链";
                }

                return "";
            },
            itemEdit(row) {
                getAdItem(row.id)
                    .then(response => {
                        this.itemForm = response.data;
                        this.itemDialogStatus = 'update';
                        this.itemDialogFormVisible = true;
                        console.log(this.itemForm);
                    });
            },
            dialogCancel(formName) {
                this.itemDialogFormVisible = false;
                this.$refs[formName].resetFields();
            },
            handleItemCreate() {
                this.resetItemTemp();
                this.itemDialogStatus = 'create';
                this.itemDialogFormVisible = true;
            },
            getTargetValuePlaceholder() {
                if(this.itemForm.target_type === "goods") {
                    return "请输入商品id";
                } else if(this.itemForm.target_type === "company") {
                    return "请输入商户id";
                } else if(this.itemForm.target_type === "cms") {
                    return "请输入新闻id";
                } else if(this.itemForm.target_type === "link") {
                    return "请输入超链接";
                }

                return "";
            },
            resetItemTemp() {
                this.itemForm = {
                    name: undefined,
                    picture: undefined,
                    orderNum: 0,
                    adId: this.currentAdId,
                    targetType: undefined,
                    targetValue: undefined,
                    bgColor: undefined,
                };
            },
            itemUpdate(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        this.itemDialogFormVisible = false;
                        putAdItem(this.itemForm.id, this.itemForm).then(() => {
                            this.dialogFormVisible = false;
                            adItem(this.itemForm.adId).then(response => {
                                this.itemList = response.data;
                            });
                            this.$message.success("媒体更新成功");
                        });
                    } else {
                        return false;
                    }
                });
            },
            itemCreate(formName) {
                const set = this.$refs;
                set[formName].validate(valid => {
                    if (valid) {
                        addAdItem(this.itemForm)
                            .then(() => {
                                this.itemDialogFormVisible = false;
                                adItem(this.itemForm.adId).then(response => {
                                    this.itemList = response.data;
                                })
                                this.$message.success("媒体创建成功");
                            })
                    } else {
                        return false;
                    }
                });
            },
            // getStatusText(row) {
            //     if(row.isSystem === 1) {
            //         return "是"
            //     }

            //     return "否"
            // },
            handleItemDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        delAdItem(row)
                            .then(() => {
                                this.$message.success("媒体删除成功");
                                const index = this.itemList.indexOf(row);
                                this.itemList.splice(index, 1);
                            });
                    }).catch(()=>{});
            }
        }
    }
</script>